<template>
	<view :style="{ '--color': color }">
		<status-bar title=" " hideBg="1" statusHeight backColor :back="back"></status-bar>
		<swiper class="Swiper" :indicator-dots="false" :autoplay="false" circular :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in banner" :key="index">
				<image :src="$imgUrls(item)" mode="aspectFill" class="wh"></image>
			</swiper-item>
		</swiper>

		<view class="Nav">
			<view class="flex-1">
				<u-tabs
					:list="open_date"
					@click="click"
					lineColor="#d7b06d"
					:inactiveStyle="inactiveStyle"
					:activeStyle="activeStyle"
					:lineHeight="1"
					:lineWidth="40"
					:current="current"
				></u-tabs>
			</view>
			<view class="allNav" @click.stop="show = true">全部</view>
		</view>

		<view class="botBox" v-for="(item, index) in site_time" :key="index" v-if="current == index">
			<view class="listBox" v-for="(subItem, subIndex) in item" :key="subIndex">
				<image :src="$imgUrls(subItem.img)" mode="aspectFill" class="subItem_img"></image>
				<view class="flex-1 conList">
					<text class="title">{{ subItem.name }}</text>
					<text class="time">开宴时间：{{ subItem.open_time }}</text>
					<view class="row" v-if="subItem.price_info.length">
						<view class="privce_list" v-for="(tItem, tIndex) in subItem.all_price_info" :key="tIndex">
							<text class="privce_discount">{{ tItem.data }}</text>
							<text class="privce_Origina" v-if="tItem.full_price">{{ tItem.full_price }}</text>
						</view>
					</view>
					<view class="d-flex a-center">
						<text class="Remaining">座席剩余:{{ subItem.available_site }}</text>
						<text class="Remaining">妆造剩余:{{ subItem.make_up_num }}</text>
					</view>
				</view>
				<view class="Nowreserve" @click="NowReserve(subItem)">立即预定</view>
			</view>
		</view>

		<u-calendar
			:show="show"
			ref="calendar"
			:showSubtitle="false"
			mode="single"
			:color="color"
			:defaultDate="customList[current]"
			:customList="customList"
			monthNum="2"
			@confirm="confirm"
			@close="show = false"
		></u-calendar>

		<u-popup :show="showContent" mode="center" :round="10" :safeAreaInsetBottom="false">
			<view class="sowCone">
				<text class="row j-centert black size34 bold">预定须知</text>
				<view class="cponView">
					<u-parse :content="site_config.content"></u-parse>
				</view>
				<view class="botFot">
					<view class="notconti" @click="ageBtn">
						<text class="black size28">我已阅读并同意此协议</text>
						<text class="size28 black" v-if="ageTime > 0">({{ ageTime }}s)</text>
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="isOk" mode="center" :round="10" :safeAreaInsetBottom="false">
			<view class="sowCone" v-if="reconfirmData">
				<text class="size32 bold black p-top10 p-bot10 t-letter4">您想预订的餐秀</text>
				<view class="row a-center color_33 size28 p-top12">宴会日期：{{ open_date[current].name }}</view>
				<view class="row a-center color_33 size28 p-top12">宴会名称：{{ reconfirmData.name }}</view>
				<view class="row a-center color_33 size28 p-top12">开宴时间：{{ reconfirmData.open_time }}</view>
				<view class="row a-center color_33 size28 p-top12">宴席剩余：{{ reconfirmData.available_site }}</view>
				<view class="row a-center color_33 size28 p-top12">装造剩余：{{ reconfirmData.make_up_num }}</view>
				<view class="row j-sa a-center m-top30 m-bot10">
					<view class="okbtn Cancel" @click="isOk = false">取消</view>
					<view class="okbtn Continue" @click="Config_btn">确定</view>
				</view>
			</view>
		</u-popup>

		<showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			showModal: false,
			banner: [],
			customList: [],
			open_date: [],
			site_time: [],
			current: 0,
			inactiveStyle: {
				fontSize: '12px',
				color: '#606266'
			},
			activeStyle: {
				fontSize: '13px',
				color: '#000',
				fontWeight: 'bold'
			},
			show: false,
			showContent: false,
			color: '#d7b06d',
			site_config: '',
			ageTime: 3,
			ageFlge: false,
			ageDown: null,
			ageId: '',
			isOk: false,
			reconfirmData: ''
		};
	},

	onLoad() {
		this.getSiteTimeList();
	},

	methods: {
		getSiteTimeList() {
			this.$http
				.get({
					url: '/SiteApi/getSiteTimeList'
				})
				.then((res) => {
					if (res.code != 200) return this.$Toast(res.msg);
					const Result = res.data;
					this.site_config = Result.site_config;
					this.banner = Result.banner || [];
					this.customList = Result.open_calender || [];
					this.open_date = Result.open_date || [];
					this.site_time = Result.site_time_day_time || [];
					this.showContent = true;
					this.ageDown = setInterval(() => {
						if (this.ageTime > 0) {
							this.ageTime--;
						} else {
							clearInterval(this.ageDown);
						}
					}, 1000);
				});
		},
		NowReserve(reconfirmData) {
			if (!this.vid) return (this.showModal = true);
			this.reconfirmData = reconfirmData;
			this.isOk = true;
		},
		click(e) {
			this.current = e.index;
		},

		confirm(e) {
			const Index = this.customList.findIndex((n) => n == e[0]);
			this.current = Index;
			this.show = false;
		},

		ageBtn() {
			if (this.ageTime > 0) return;
			this.showContent = false;
		},
		CloseAge() {
			clearInterval(this.ageDown);
			this.showContent = false;
			this.ageTime = 3;
		},
		Config_btn() {
			this.isOk = false;
			this.toUrl(`Selectseat?id=${this.reconfirmData.id}`);
		}
	},
	onUnload() {
		clearInterval(this.ageDown);
		this.showContent = false;
	},
	onHide() {
		clearInterval(this.ageDown);
		this.showContent = false;
	},

	computed: {
		...mapState(['vid'])
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f7efe2;
}
.sowCone {
	width: 620rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cponView {
	width: 100%;
	height: 760rpx;
	overflow-y: scroll;
	padding: 30rpx 10rpx;
}
.botFot {
	width: 100%;
	height: 130rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.notconti {
	width: 500rpx;
	height: 90rpx;
	background-color: #d7b06d;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.Swiper {
	width: 100%;
	height: 750rpx;
}
.Swiper swiper-item {
	width: 100%;
	height: 100%;
}
.Nav {
	width: 100%;
	height: 100rpx;
	background-color: #f7efe2;
	margin-top: -20rpx;
	position: relative;
	z-index: 100;
	border-radius: 20rpx 20rpx 0 0;
	display: flex;
	align-items: center;
}
.allNav {
	color: rgb(96, 98, 102);
	padding: 0 16rpx;
	font-size: 24rpx;
}
.botBox {
	padding-bottom: 30rpx;
}
.listBox {
	width: 100%;
	padding: 20rpx 24rpx;
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid #ddd;
}
.subItem_img {
	width: 90rpx;
	height: 90rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}
.conList {
	display: flex;
	flex-direction: column;
}
.Nowreserve {
	width: 160rpx;
	height: 60rpx;
	background-color: var(--color);
	color: #333;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10rpx;
	font-size: 22rpx;
	margin-left: 10rpx;
}
.title {
	color: #000;
	font-size: 26rpx;
	font-weight: bold;
}
.time {
	color: #999;
	font-size: 20rpx;
	margin-top: 4rpx;
}
.privce_list {
	padding: 8rpx 18rpx;
	border: 2rpx solid var(--color);
	background-color: rgba(255, 230, 189, 0.5);
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	margin-right: 10rpx;
	margin-top: 8rpx;
}
.privce_discount {
	font-size: 22rpx;
}
.privce_Origina {
	font-size: 22rpx;
	color: #999;
	margin-top: 2rpx;
	text-decoration: line-through;
}
.Remaining {
	color: #000;
	font-size: 22rpx;
	margin-right: 16rpx;
	margin-top: 6rpx;
}
::v-deep.u-calendar-month__title {
	display: none !important;
}
.okbtn {
	width: 260rpx;
	height: 80rpx;
	border-radius: 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30rpx;
}
.Cancel {
	background-color: #f1f1f1;
	color: #999;
}
.Continue {
	background-color: var(--color);
	color: #ffffff;
}
</style>
